<template>
    <div id="dateContainer">
      <div  class='calendar'>
        <Calendar v-on:choseDay="clickDay" v-on:changeMonth="changeDate" :sundayStart="false" class='calendardemo' :data='DayData'></Calendar>
      </div>
      <div class='calendar-bottom'>
        <Router-link to='/recordsymptom' class='calendar-bottom-body'>
          <i class="icon iconfont iconleft">&#xe629;</i>
          <a>身体症状</a>
          <i class="icon iconfont iconright">&#xe603;</i>
        </Router-link>
        <Router-link to='/recordsymptom' class='calendar-bottom-body'>
          <i class="icon iconfont iconleft">&#xe604;</i>
          <a>今日目标</a>
          <i class="icon iconfont iconright">&#xe603;</i>
        </Router-link>
        <CarIcon />
      </div>
    </div> 
</template>

<script>
import Calendar from 'vue-calendar-component';
import CarIcon from '../cart/CartIcon.vue'

export default {
  name: 'App',
  data(){
    return{
      DayData:'123'
    }
  },
  components: {
    Calendar,
    CarIcon
  },
  methods:{
    clickDay(data) {
      console.log(data); //选中某天
      this.DayData = data
    },
    changeDate(data) {
      console.log(data); //左右点击切换月份
    }
  }
}

</script>

<style lang='less' scoped>
#dateContainer{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: #f1f1f1;
}
.calendar{
    width: 100%;
    float: left;
    height: 335px;
    background: #0FC37C;
    .calendardemo{
      background: #fff;
      .wh_content_all{
        background-color: #fff;
      }
    }
}
.calendar-bottom{
  float: left;
  width: 100%;
  height: 5rem;
  background-color: #fff;
  margin-top:0.43rem;
  line-height:1rem;
  .calendar-bottom-body{
    margin: 5% 5% 2.5% 5%;
    width: 90%;
    height: 1rem;
    float: left;
    .iconleft{
      font-size:0.5rem;
      color: #717171;
      margin-right:0.2rem;
      margin-left:0.2rem;
      float: left;
    }
    a{
      font-size:0.35rem;
      color: #717171;
      float: left;
    }
    .iconright{
      float: right;
      font-size:0.5rem;
      margin-right:0.2rem;
    }
  }
}

</style>